<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 学生数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {studentOrderClassNo: string, studentUpdateMan: string, studentName: string, studentIntroduction: string, studentNo: string, studentOrderClassReviewState: string, studentHobby: string, studentOrderClassName: string}, orderClassName: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const studentData = reactive({
    orderClassName: '',
    tableData: [],
    total: 0,
    pageSize: 5,
    pageNum: 1,
    form: {
        studentNo: '',
        studentName: '',
        studentIntroduction: '',
        studentHobby: '',
        studentOrderClassReviewState: '',
        studentOrderClassNo: '',
        studentOrderClassName: '',
        studentUpdateMan: '',
    }
})

/**
 * 加载学生
 */
const loadStudent = () => {
    request.get(`/api/student/check-student-page/${account.accountNo}`, {
        params: {
            pageNum: studentData.pageNum,
            pageSize: studentData.pageSize,
            orderClassName: studentData.orderClassName
        }
    }).then(res => {
        studentData.tableData = res.data?.list || []
        studentData.total = res.data?.list.map(item => item.studentCountNumber)[0] || 0;
    })

}
// 调用学生加载方法，获取后台数据
loadStudent()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadStudent()
}

/**
 * 重置
 */
const reset = () => {
    studentData.orderClassName = ''
    // 重置时，重新加载数据即可
    loadStudent()
}


/**
 * 审核学生
 *
 * @param row 按行修改
 */
const checkStudent = (row) => {
    studentData.form.studentNo = row.studentNo
    studentData.form.studentName = row.studentName
    studentData.form.studentUpdateMan = account.accountNo
    studentData.form.studentIntroduction = row.studentIntroduction
    studentData.form.studentHobby = row.studentHobby
    studentData.form.studentOrderClassNo = row.studentOrderClassNo
    studentData.form.studentOrderClassName = row.studentOrderClassName
    studentData.formVisible = true
}

/**
 * 提交修改的学生
 */
const submitCheckStudent = (state) => {
    if (account.accountRoleName === 'visitor-order-class-admin') {
        ElMessage.info("游客-订单班管理员仅可以查看信息")
    } else {
        studentData.form.studentOrderClassReviewState = state
        request.put(`/api/student/check-student`, studentData.form).then(res => {
            if (res.code === "200") {
                // 重新获取数据
                loadStudent()
                // 关闭弹窗
                studentData.formVisible = false
                ElMessage.success("编辑成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

</script>

<template>
    <div v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="studentData.orderClassName"
                      placeholder="请输入订单班名称查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadStudent" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-table :data="studentData.tableData" style="width: 100%">
                    <el-table-column prop="studentOrderClassNo" label="班号"/>
                    <el-table-column prop="studentOrderClassName" label="班名"/>
                    <el-table-column prop="studentNo" label="学号"/>
                    <el-table-column prop="studentName" label="姓名"/>
                    <el-table-column prop="studentOrderClassReviewState" label="状态"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="checkStudent(scope.row)" type="primary" size="small"
                                       plain>审核
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="studentData.pageNum"
                           v-model:page-size="studentData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="studentData.total"/>
        </div>
        <el-dialog v-model="studentData.formVisible" :close-on-click-modal="false" title="报名信息">
            <el-form :model="studentData.form" label-width="100px" label-position="right"
                     style="padding-right: 30px;">
                <el-form-item label="班名">
                    <el-input placeholder="无" v-model="studentData.form.studentOrderClassName" autocomplete="off"
                              :maxlength="20" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="无" v-model="studentData.form.studentName" autocomplete="off"
                              :maxlength="20" disabled></el-input>
                </el-form-item>
                <el-form-item label="学生介绍">
                    <el-input
                            v-model="studentData.form.studentIntroduction"
                            :autosize="{ minRows: 4, maxRows: 8 }"
                            type="textarea"
                            disabled
                            placeholder="无"
                            :maxlength="300"
                    />
                </el-form-item>
                <el-form-item label="学生爱好">
                    <el-input
                            v-model="studentData.form.studentHobby"
                            :autosize="{ minRows: 4, maxRows: 8 }"
                            type="textarea"
                            disabled
                            placeholder="无"
                            :maxlength="300"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="studentData.formVisible = false">取消</el-button>
                    <el-button type="info" @click="submitCheckStudent(2)">不通过</el-button>
                    <el-button type="primary" @click="submitCheckStudent(3)">通过</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>